<template>
	<view>
		<router-view></router-view>
	</view>
</template>
<script>
import { purpleTheme } from './utils/themeConfig.js'
export default {
	data() {
		return {
			theme: purpleTheme
		}
	}
}
</script>
<style lang="scss">
/*每个页面公共css */
@import '@/uni_modules/uni-scss/index.scss';
/* #ifndef APP-NVUE */
@import '@/static/customicons.css';
// 设置整个项目的背景色
page {
	background-color: #1E1E2E;
}
/* 调整导航栏样式 */
.uni-page-head {
	background-color: #2D2D44 !important;
	border-bottom: 1px solid #4D4C6D !important;
	
	.uni-page-head__title {
		color: #9796B8 !important;
		font-size: 16px;
		font-weight: 500;
	}
	
	.uni-page-head__btn {
		color: #6E6C89 !important;
		
		&:active {
			opacity: 0.7;
		}
	}
}
/* 调整状态栏样式 */
.uni-status-bar {
	background-color: #2D2D44 !important;
}
/* 更新 .uni-tabbar 相关样式 */
.uni-tabbar {
    background-color: #2D2D44 !important;
    border-top: 1px solid rgba(77, 76, 109, 0.3) !important;
    height: 55px !important;
    position: relative;
    overflow: hidden;
    
    /* 背景动画效果 */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(151, 150, 184, 0.3) 50%, 
            transparent 100%);
        animation: scanline 2s linear infinite;
    }
    
    .uni-tabbar__item {
        height: 55px !important;
        padding: 5px 0;
        position: relative;
        transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        
        /* 选中状态 */
        &--selected {
            transform: translateY(-2px);
            
            .uni-tabbar__icon {
                transform: scale(1.2);
                animation: iconPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }
            
            .uni-tabbar__label {
                color: #9796B8 !important;
                font-weight: 500;
                animation: labelFloat 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }
            
            /* 发光圆点 */
            &::before {
                content: '';
                position: absolute;
                top: 15px;
                left: 50%;
                width: 4px;
                height: 4px;
                background: #9796B8;
                border-radius: 50%;
                transform: translateX(-50%);
                box-shadow: 0 0 10px #9796B8;
                animation: glowDot 2s ease-in-out infinite;
            }
            
            /* 选中项底部发光线 */
            &::after {
                content: '';
                position: absolute;
                bottom: 8px;
                left: 50%;
                width: 20px;
                height: 2px;
                background: #9796B8;
                border-radius: 1px;
                transform: translateX(-50%);
                box-shadow: 0 0 10px rgba(151, 150, 184, 0.8);
                animation: lineWidth 0.3s ease-out;
            }
        }
        
        /* 点击效果 */
        &:active {
            .uni-tabbar__icon {
                transform: scale(0.8);
                transition: transform 0.1s ease;
            }
            
            &::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 100%;
                height: 100%;
                background: radial-gradient(circle, rgba(151, 150, 184, 0.2) 0%, transparent 70%);
                transform: translate(-50%, -50%);
                animation: rippleEffect 0.6s ease-out;
            }
        }
    }
    
    .uni-tabbar__icon {
        width: 25px !important;
        height: 25px !important;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        position: relative;
    }
    
    .uni-tabbar__label {
        font-size: 12px;
        transition: all 0.3s ease;
        opacity: 0.8;
    }
    
    /* 添加属性选择器来处理不同的选中状态 */
    &[data-current="0"] .uni-tabbar__item:nth-child(1),
    &[data-current="1"] .uni-tabbar__item:nth-child(2),
    &[data-current="2"] .uni-tabbar__item:nth-child(3),
    &[data-current="3"] .uni-tabbar__item:nth-child(4) {
        .uni-tabbar__icon {
            transform: scale(1.2);
            filter: drop-shadow(0 0 8px rgba(151, 150, 184, 0.6));
        }
        
        .uni-tabbar__label {
            color: #9796B8 !important;
            font-weight: 500;
        }
    }
    
    /* 添加过渡效果 */
    .uni-tabbar__item {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        
        .uni-tabbar__icon,
        .uni-tabbar__label {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
    }
}
/* 动画关键帧 */
@keyframes scanline {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
@keyframes iconPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1.2); }
}
@keyframes labelFloat {
    0% { transform: translateY(0); opacity: 0.8; }
    50% { transform: translateY(-2px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes glowDot {
    0% { opacity: 0.5; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.5); }
    100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
}
@keyframes lineWidth {
    0% { width: 0; opacity: 0; }
    100% { width: 20px; opacity: 1; }
}
@keyframes rippleEffect {
    0% { 
        opacity: 1;
        transform: translate(-50%, -50%) scale(0);
    }
    100% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}
/* 悬浮效果 */
.uni-tabbar__item:not(.uni-tabbar__item--selected):hover {
    .uni-tabbar__icon {
        transform: translateY(-2px);
    }
    
    .uni-tabbar__label {
        opacity: 1;
    }
}
/* 点击涟漪动画 */
@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}
/* 添加弹性动画 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
/* 添加呼吸光效果 */
@keyframes glow {
    0%, 100% { opacity: 0.5; filter: blur(8px); }
    50% { opacity: 1; filter: blur(4px); }
}
/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .uni-tabbar {
        background-color: rgba(45, 45, 68, 0.95) !important;
    }
}
/* 调整滚动条样式 */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background-color: #2D2D44;
}
::-webkit-scrollbar-thumb {
	background-color: #4D4C6D;
	border-radius: 3px;
}
::-webkit-scrollbar-track {
	background-color: #2D2D44;
}
/* 全局过渡动画 */
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}
/* 全局按钮样式 */
button {
	background-color: #4D4C6D !important;
	color: #9796B8 !important;
	border: 1px solid #6E6C89 !important;
	
	&:active {
		transform: scale(0.98);
		opacity: 0.9;
	}
}
/* 全局输入框样式 */
input {
	/* 去除默认边框和轮廓 */
	border: none !important;
	outline: none;
	/* 去除默认背景 */
	background: none !important;
	/* 去除内部阴影 */
	-webkit-appearance: none;
	/* 去除点击时的高亮 */
	-webkit-tap-highlight-color: transparent;
	/* 设置文字颜色 */
	color: #9796B8;
	
	&::placeholder {
		color: #6E6C89 !important;
	}
}
/* 去除输入框聚焦时的外边框 */
input:focus {
	outline: none;
}
/* 去除搜索输入框的默认样式 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}
/* 统一文本域样式 */
textarea {
	border: none !important;
	outline: none;
	background: none !important;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	color: #9796B8;
	
	&::placeholder {
		color: #6E6C89 !important;
	}
}
textarea:focus {
	outline: none;
}
/* 全局卡片样式 */
.card {
	background-color: #2D2D44;
	border: 1px solid #4D4C6D;
	border-radius: 6px;
}
/* #endif */
.example-info {
	font-size: 14px;
	color: #6E6C89;
	padding: 10px;
}
/* 确保动画效果在 H5 环境下正常工作 */
/* #ifdef H5 */
.uni-tabbar {
    z-index: 999;
    
    .uni-tabbar__item {
        overflow: visible;
    }
}
/* #endif */
/* 原有的样式保持不变 */
page {
	background-color: #1E1E2E;
}

.container {
	min-height: 100vh;
	background: #1E1E2E;
}
</style>
